<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg-vue</title>
    <link rel="stylesheet" href="./style/index.css" />
    <script src="./script/lib/vue@2.6.11.js"></script>
</head>
<body>
    <div id="page">
        <div class="btnBar">
            <span class="btn clear" @click="clearAll">清除所有</span>
            <span @click="changeMode('svg')" class="btn svg" :class="[mode=='svg'?'current':'']">路线编辑器</span>
            <span @click="changeMode('ppt')" class="btn ppt" :class="[mode=='ppt'?'current':'']">视图模式</span>
        </div>
        <div><v-ppt :mode="mode" :element="element" /></div>
        <div v-show="mode=='svg'" id="canvas" class="canvas" @click="canvasClick" @mouseup="mouseUp" @mousemove="onCanvasMove" style="width:1000px;height:600px;" :style="{cursor:freeStartEle?'grabbing':'default'}">
            <svg version="1.1" baseProfile="full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                <v-line v-for="it in line" :it="it" />
                <v-circle v-for="it in element" :id="it.id" :bindmap="it.bindmap" :cx="it.cx" :cy="it.cy" :r="it.r" :fill="it.fill" :freelink="!!freeStartEle" />
                <path v-if="freeStartEle" style="pointer-events:none;" :d="'M'+freeStartPos[0]+' '+freeStartPos[1]+' L '+freenEndPos[0]+' '+freenEndPos[1]" fill="transparent" stroke="#ff0000"  stroke-dasharray="5,5" stroke-width="3"/>
            </svg>
        </div>
        <v-editer />
    </div>
</body>
<script>
    window.App = {};
    App.eventBus = new Vue();
    App.canvasWidth = 1000;
    App.canvasHeight = 600;
    App.lineDelArrCb = [];
</script>
<script src="./script/lib/ckeditor/ckeditor.js"></script>
<script src="./script/lib/ckeditor/config.js"></script>
<script src="./script/components/circle.js"></script>
<script src="./script/components/line.js"></script>
<script src="./script/components/editer.js"></script>
<script src="./script/components/ppt.js"></script>
<script src="./script/main.js"></script>
</html>
